<template>
    <div>
        <el-table v-if="role_list && role_list.manager" :data="superData" :show-header="false">
            <el-table-column type="expand">
                <template>
                    <el-table :data="role_list.manager.children" stripe :header-cell-style="getRowClass">
                        <el-table-column label="姓名" prop="name" width="120"></el-table-column>
                        <el-table-column label="登录账户名" prop="userName" width="120"></el-table-column>
                        <el-table-column label="手机号码" prop="mobile" width="120"></el-table-column>
                        <el-table-column label="超级管理员" prop="superAdmin"></el-table-column>
                        <el-table-column label="操作" width="200" v-if="role_list.manager.loginer== '是'">
                            <template slot-scope="scope">
                                <i class="el-icon-sort roate" v-if="scope.row.superAdmin === '是'" @click="attornSuperManager(true)"></i>
                                <i class="el-icon-delete" v-else @click="delUserOutRole('manager', scope.row.userid)"></i>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column label="管理员" prop="name" width="120"></el-table-column>
            <el-table-column label="人数" prop="num" width="50"></el-table-column>
            <el-table-column label="描述" prop="desc"></el-table-column>
            <el-table-column label="操作" width="135" v-if="role_list.manager.loginer== '是'">
                <template slot-scope="scope">
                    <el-button size="mini" @click="addUserInRole('manager')">
                        <i class="el-icon-circle-plus text-blue"></i>添加</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-table v-if="role_list" :data="role_list.role" :show-header="false" style="width: 100%;">
            <el-table-column type="expand">
                <template slot-scope="props" v-if="props.row.children && props.row.children.td">
                    <el-table :data="props.row.children.td" stripe :header-cell-style="getRowClass">
                        <el-table-column v-for="(item, index) in props.row.children.th" :key="index" :label="item.label" :prop="item.key"></el-table-column>
                        <el-table-column label="操作" width="200">
                            <template slot-scope="scope">
                                <i class="el-icon-delete" @click="delUserOutRole(props.row.roleId, scope.row.userid)"></i>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column label="职位名" prop="roleName" width="120"></el-table-column>
            <el-table-column label="人数" prop="userQty"></el-table-column>
            <el-table-column label="操作" width="300">
                <template slot-scope="scope">
                    <el-button size="mini" @click="editRole(scope.row)">
                        <i class="el-icon-edit-outline text-blue"></i>编辑</el-button>
                    <el-button size="mini" @click="addUserInRole(scope.row.roleId)">
                        <i class="el-icon-circle-plus text-blue"></i>添加</el-button>
                    <el-button size="mini" @click="delRole(scope.row.roleId)">
                        <i class="el-icon-delete text-danger"></i>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <create-role :form="form"></create-role>
        <wait-user-list v-on:changeIsShow="changeIsShow" v-on:handleCurrentChange="handleCurrentChange" :is_show="is_wait_user_show" :data="wait_add_user_list" :roleId="roleId"></wait-user-list>
        <attorn-super :is_show="is_attorn_super_manager_show" v-on:attornSuperManager="attornSuperManager"></attorn-super>
    </div>
</template>

<script>
import role from "@/api/role.js";

import CreateRole from "./create.vue";
import WaitUserList from "./waitadduser.vue";
import AttornSuper from "./attorn.vue";

import { mapGetters } from "vuex";

export default {
    name: "role-table",
    components: {
        CreateRole,
        WaitUserList,
        AttornSuper
    },
    computed: {
        ...mapGetters("role", ["role_list"])
    },
    data() {
        return {
            superData: [
                {
                    name: "管理员",
                    num: undefined,
                    desc: ""
                }
            ],
            form: undefined,
            is_wait_user_show: false,
            wait_add_user_list: undefined,
            roleId: undefined,
            is_attorn_super_manager_show: false
        };
    },
    async mounted() {
        await this.$store.dispatch("role/getRoleList");
        this.superData[0].num = this.role_list.manager.children.length + "人";
    },
    methods: {
        attornSuperManager(val) {
            this.is_attorn_super_manager_show = val;
        },
        async addUserInRole(roleId) {
            this.roleId = roleId;
            await role.getWorkerNoInRoleList({ roleId: roleId }).then(res => {
                this.wait_add_user_list = res;
            });
            this.is_wait_user_show = true;
        },
        delRole(id) {
            this.$confirm("确认删除?", "提示", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    role.delRole({ id: id })
                        .then(res => {
                            this.successCallBack("删除成功!");
                        })
                        .catch(err => {
                            this.$message.error(err);
                        });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
        },
        delUserOutRole(roleId, userId) {
            this.$confirm("确认删除?", "提示", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    role.removeUserOutRole({ userid: userId, roleId: roleId })
                        .then(res => {
                            this.successCallBack("删除成功!");
                        })
                        .catch(err => {
                            this.$message.error(err);
                        });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
        },
        getRowClass({ row, column, rowIndex, colIndex }) {
            if (rowIndex === 0) {
                return "background:#f5f7f9";
            }
        },
        editRole(val) {
            this.$store.commit("role/CHANGE_IS_CREATE", false);
            this.$store.commit("role/CHANGE_IS_CREATE_DIALOG_SHOW", true);
            this.form = {
                roleName: val.roleName,
                roleId: val.roleId,
                remark: val.remark
            };
        },
        successCallBack(message) {
            this.$message({
                type: "success",
                message: message
            });
            this.$store.dispatch("role/getRoleList");
        },
        changeIsShow(val) {
            this.is_wait_user_show = val;
        },
        async handleCurrentChange(data) {
            await role
                .getWorkerNoInRoleList({
                    roleId: this.roleId,
                    pageNumber: data.val,
                    name: data.name
                })
                .then(res => {
                    this.wait_add_user_list = res;
                });
        }
    }
};
</script>

<style>
.roate {
    transform: rotate(90deg);
}
</style>
